<template>
    <!-- 最大盒子 -->
    <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'添加员工'" :autoBack="true" leftIconColor="$uni-text-color"
        :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
        <!-- 最大盒子 -->
        <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <!-- 搜索 && 是否结算 盒子 -->
            <view class="top_box">
                <!-- 搜索组件 -->
                <view class="area search_box">
                    <s-search-keyword :border="'1px solid rgba(0, 56, 247, 0.3)'" :placeholder="'搜索员工'"
                        @searchKeyWord="searchKeyWord"></s-search-keyword>
                </view>
                <!-- 空白盒子 -->
                <view class="blank_box"></view>
                <!-- 列表 -->
                <view>
                    <scroll-view scroll-y class="scroll_box " v-if="list.length">
                        <view v-for="i in list" :key="i.id">
                            <view class="list_item_title">
                                <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_zhizhao.png`"
                                    mode="scaleToFill" v-if="i.source == 1" />
                                <image :src="`${baseUrl}/uploads/uniapp_image/user/bancidetails_icons_dailiren.png`"
                                    mode="scaleToFill" v-else />
                                <view class="titlename">{{ i.title }}</view>
                            </view>

                            <view class="list_item" v-for="(item, index) in i.list" :key="index" @tap="moreSelect(item.user_id)">
                                <!-- 选择按钮 -->
                                <view class="select_image" >
                                    <image v-if="isSelected(item.user_id)"
                                        :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`"
                                        mode="scaleToFill" />
                                    <image v-else
                                        :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`"
                                        mode="scaleToFill" />
                                </view>
                                <!-- 头像 -->
                                <view class="head_box">
                                    <image :src="`${baseUrl}` + item.user.avatar" mode="aspectFill" />
                                </view>
                                <!-- 信息盒子 -->
                                <view class="message_box">
                                    <view class="message_title">{{ item.user.nickname }}</view>
                                    <view class="message_identity">
                                        {{ item.user.authentication.identity_id }} 
                                        {{
        item.user.gender == 0 ? '女' : '男' }}</view>
                                    <view class="mes_flex">
                                        <view class="message_time">
                                            <view v-if="item.attendance.length" v-for="(i, index) in item.attendance"
                                                :key="index">
                                                {{ i.type == 1 ? '上午' : '下午' }}:{{ i.trim }}
                                            </view>
                                            <view class="message_time" v-else>
                                                暂无打卡数据
                                            </view>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                    <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"></u-empty>
                </view>
            </view>


            <!-- 底部占位盒子 -->
            <view class="placeholder_bottom"></view>
            <view class="end_box">
                <!-- 全选按钮盒子 -->
                <view class="check_all_box">
                    <!-- 全选按钮 -->
                    <view class="check_all_button" @tap="checkAllInteraction">
                        <view class="select_image">
                            <image v-show="checkAll == 1"
                                :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_check.png`"
                                mode="scaleToFill" />
                            <image v-show="checkAll == 0"
                                :src="`${baseUrl}/uploads/uniapp_image/staff/kehuguanli_icon_checkfor.png`"
                                mode="scaleToFill" />
                        </view>
                        <view>全选</view>
                    </view>
                    <!-- 已选择 -->
                    <view class="selected_box">
                        <view class="number_people">已选择 {{ selectedIds.length }}/{{ personLength }} 名员工</view>
                    </view>
                </view>
                <view class="placeholder"></view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view>
            <s-button @netWork="addStaff" :text="'添加员工'"></s-button>
        </view>
    </s-layout>
</template>
<script setup>
import { baseUrl } from '@/sheep/config';
import { onLoad, onShow } from "@dcloudio/uni-app";
import { reactive, ref } from "vue";
import sheep from "@/sheep";
// 获取系统信息
const { safeAreaInsets } = uni.getSystemInfoSync();
const PopupId = ref()
const date = ref()
const schedule_id =ref()
onLoad((options) => {
    // console.log(options,'user_id')
    PopupId.value = options.user_id
    date.value = options.date
    schedule_id.value =options.schedule_id
    personLength.value = Number(0)
    getScheduleUserIndex()
});


// 多选  total.value 总共多少条数据
const moreSelect = (user_id) => {
    const index = selectedIds.value.indexOf(user_id);
    if (index === -1) {
        selectedIds.value.push(user_id);
        if (selectedIds.value.length == allList.value.length) {
            checkAll.value = 1
        }
    } else {
        selectedIds.value.splice(index, 1);
        if (selectedIds.value.length !== allList.value.length) {
            checkAll.value = 0
        }
    }
    //   console.log('多选', selectedIds.value);
}
const isSelected = (user_id) => {
    return selectedIds.value.includes(user_id);
}
// 全选
const checkAll = ref(0)
const selectedIds = ref([])
// 全选交互逻辑
const checkAllInteraction = () => {
    if (checkAll.value === 0) {
        selectedIds.value = allList.value.map(item => item.user_id);
        checkAll.value = 1;
    } else {
        selectedIds.value = [];
        checkAll.value = 0;
    }
    // console.log('全选', selectedIds.value);
}
//搜索
const keyword = ref()
const searchKeyWord = (srarch_value) => {
    list.value = []
    keyword.value = srarch_value
    personLength.value = Number(0)
    getScheduleUserIndex()
}
//请求数据
//人员列表
const personLength = ref(Number(0))
const list = ref([])//代理上列表
const allList = ref([])
const getScheduleUserIndex = async () => {
    let params = {
        filter: JSON.stringify({
            'user.nickname': keyword.value,
            date: date.value,
            'user.id': PopupId.value,
            state:'0'
        }),
        op: JSON.stringify({
            'user.nickname': 'LIKE',
            date: '=',
            state:'=',
            'user.id': 'not in',
        }),
        schedule_id: schedule_id.value
    }
    const res = await sheep.$api.project.getScheduleUserIndex(params);
    if (res.code ==  1) {
        list.value = res.data
        list.value.forEach(items => {
            items.list.forEach(item => {
                item.money = '' // 金额
                item.labor_hour = ''
                allList.value.push(item)
                item.date_format = item.date.split("-")[1] + '.' + item.date.split("-")[2]
                item.attendance.forEach(i => {
                    i.trim = i.clocking_time.split(' ').pop();
                })
            })
            personLength.value += items.list.length
            return personLength.value
        })

    }
}
// 点击添加员工按钮
const addStaff = () => {
    if(selectedIds.value.length !== 0 || checkAll.value == 1){
        uni.$emit('returnData',selectedIds.value)
        // uni.navigateBack 返回上一页或多级页面，delta可以不写，默认是1
        uni.navigateBack({    
            delta: 1
        })
    }else{
        sheep.$helper.toast('请选择员工,再进行操作');
    }
   
}

</script>

<style scoped lang="scss">
page {
    width: 100%;
    height: 100%;
}

// 版心
.area {
    width: calc(100% - 40rpx);
    margin: 0 20rpx;
}

:deep(.u-form-item__body.data-v-b4fd400b) {
    padding: 20rpx 0 20rpx 30rpx;
}

:deep(.u-form-item__body__left__content__label.data-v-b4fd400b) {
    font-weight: $uni-font-weight;
}

:deep(.u-form-item__body__right__message.data-v-b4fd400b) {
    margin-left: 200rpx !important;
}

// 头部盒子
.top_box {
    height: 80rpx;
    background-color: #ffffff;
    padding: 20rpx 0;
}

// 空白盒子
.blank_box {
    height: 40rpx;
}

// 列表
.scroll_box {
    height: 65vh;
    border-radius: 16rpx;
    background-color: #FFFFFF;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
}

// 列表项
.list_item {
    height: 154rpx;
    display: flex;
    align-items: center;
    margin: 0 30rpx 40rpx 30rpx;
    position: relative;

    // border-bottom: 2rpx solid #efefef;
    // 选择图标
    .select_image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 22rpx;

        image {
            width: 100%;
            height: 100%;
        }
    }

    // 头像盒子
    .head_box {
        width: 104rpx;
        height: 104rpx;

        image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    // 信息盒子
    .message_box {
        margin-left: 30rpx;

        .message_title {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: 30rpx;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 4rpx;
        }

        .message_identity {
            font-family: PingFangSC;
            color: #999999;
            font-weight: 400;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            margin-bottom: 10rpx;
        }

        .message_time {
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: 500;
            font-size: $uni-font-size-sm;
            font-style: normal;
            text-decoration: none;
            display: flex;

            text {
                display: block;
                margin-left: 48rpx;
            }
        }
    }
}

.list_item:first-child {
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    margin-top: 30rpx;
}

.list_item:last-child {
    border-bottom-left-radius: 16rpx;
    border-bottom-right-radius: 16rpx;
    margin-bottom: 0;
}





// 底部占位盒
.placeholder_bottom {
    height: 220rpx;
    width: 100%;
    margin-top: 20rpx;
}

// 末尾盒子 (此盒子没有  “父相 ” 如要改动请按需更改)
.end_box {
    position: fixed;
    bottom: 0;
    height: 244rpx;
    width: 100%;

    // 全选按钮盒子
    .check_all_box {
        height: 80rpx;
        width: 100%;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        border: 2rpx solid #efefef;

        // 全选按钮
        .check_all_button {
            display: flex;
            margin-left: 52rpx;
            align-items: center;
            font-family: PingFangSC;
            color: #0239f7;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
        }

        // 已选择
        .selected_box {
            display: flex;
            margin-right: 40rpx;
            align-items: center;
            font-family: PingFangSC;
            color: $uni-text-color;
            font-weight: $uni-font-weight;
            font-size: $uni-font-size-base;
            font-style: normal;
            text-decoration: none;
        }
    }

    // 占位盒子
    .placeholder {
        height: 32rpx;
        width: 100%;
        background-color: #ffffff;
    }
}

// 全选图标
.select_image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 22rpx;

    image {
        width: 100%;
        height: 100%;
    }
}
// 执照员工代理商
.list_item_title {
    padding-left: 30rpx;
    height: 60rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;

    image {
        width: 30rpx;
        height: 30rpx;
    }

    .titlename {
        color: $uni-text-color;
        font-weight: 500;
       font-size:$uni-font-size-26;
        margin-left: 20rpx;
    }
}
</style>